<template>
	<view class="ordergrabbing-container">
		<orderHeader :showActivitiesRule="false" :headerData="orderGrabbingData"></orderHeader>

		<view class="order-card m-t-20 m-b-20 grabbing-ask">
			<text class="order-card-title">活动要求</text>
			<view class="u-flex u-flex-items-center m-t-20">
				<text class="grabbing-ask-lable">满返</text>
				<view class="u-flex">
					<view class="ask-sign ask-sign-1" :class="classListTypeBg(orderGrabbingData.platform)">
						{{orderGrabbingData.platform_dictText}}
					</view>
					<view class="ask-sign ask-sign-2">
						满{{orderGrabbingData.returnThreshold}}返{{orderGrabbingData.fullRefund}}</view>
				</view>
			</view>
			<view class="u-flex u-flex-items-center m-t-20">
				<text class="grabbing-ask-lable">要求</text>
				<view class="grabbing-ask-text">{{orderGrabbingData.completeRequire_dictText}}；
					<text class="prompt-color"
						v-if="orderGrabbingData.completeRequire !== 'noFeedback'">（{{orderGrabbingData.evaluateNumber}}字好评+{{orderGrabbingData.evaluationMap}}图）</text>
				</view>
			</view>
			<view class="u-flex u-flex-items-center m-t-20">
				<text class="grabbing-ask-lable">备注</text>
				<view class="grabbing-ask-text" style="color: #FF5046;">{{orderGrabbingData.remark}}</view>
			</view>
		</view>

		<view class="order-card">
			<view class="u-flex u-flex-between">
				<text class="order-card-title">参与活动流程</text>
				<view class="u-flex u-flex-items-center assistant-title" @tap="toActivityrulesDescription">活动规则<u-icon
						name="info-circle" color="#FE791B"></u-icon></view>
			</view>
			<view class="m-t-20">
				<u-steps direction="column" :current="4">
					<u-steps-item title="抢名额，后点餐" desc="抢名额时，查看活动要求">
						<template v-slot:icon>
							<text class="slot-icon">1</text>
						</template>
					</u-steps-item>
					<u-steps-item title="领红包下单，并提交订单号" desc="需在报名3小时内提交，超时名额会被取消">
						<template v-slot:icon>
							<text class="slot-icon">2</text>
						</template>
					</u-steps-item>
					<u-steps-item title="订单送达后提交订单反馈截图" desc="需在当日24点钱提交，当日24点后会减少2元，次日13点后将自动关闭订单">
						<template v-slot:icon>
							<text class="slot-icon">3</text>
						</template>
					</u-steps-item>
					<u-steps-item title="根据要求完善信息后等待返现" desc="提现秒到账">
						<template v-slot:icon>
							<text class="slot-icon">3</text>
						</template>
					</u-steps-item>
				</u-steps>
			</view>

		</view>

		<view class="footer-content">
			<view class="u-flex u-flex-between">
				<view class="fooet-btn-left">
					<u-button type="primary" shape="circle" color="#FF5151" plain text="前往首页" @tap="toIndex"></u-button>
				</view>
				<view class="fooet-btn-right">
					<u-button type="primary" shape="circle" color="#FF5151"
						:text="`剩余${orderGrabbingData.surplusQuantity}份,立即参与`" @tap="handlePlaceorder"></u-button>
				</view>
			</view>
		</view>
		<!-- @open="open" -->
		<u-popup :show="showOrderGrabbing" @close="showOrderGrabbing = false" :closeable='true' :round="10">
			<view class="ordergrabbing-popup-container">
				<view class="u-flex pop-header">
					<image :src="orderGrabbingData.shopLogo" mode="aspectFill" class="pop-header-img"></image>
					<view class="pop-header-title">
						<view class="title">{{orderGrabbingData.shopName}}</view>
						<view class="remain">
							剩余名额：<text class="prompt-color">{{orderGrabbingData.surplusQuantity}}</text>
						</view>
					</view>
				</view>
				<view class=" m-t-20 m-b-20 grabbing-ask popup-grabbing-ask">
					<view class="u-flex u-flex-items-center m-t-20">
						<text class="grabbing-ask-lable">满返</text>
						<view class="u-flex">
							<view class="ask-sign ask-sign-1" :class="classListTypeBg(orderGrabbingData.platform)">
								{{orderGrabbingData.platform_dictText}}
							</view>
							<view class="ask-sign ask-sign-2">
								满{{orderGrabbingData.returnThreshold}}返{{orderGrabbingData.fullRefund}}</view>
						</view>
					</view>
					<view class="u-flex u-flex-items-center m-t-20">
						<text class="grabbing-ask-lable">要求</text>
						<view class="grabbing-ask-text">{{orderGrabbingData.completeRequire_dictText}}；<text
								class="prompt-color">（{{orderGrabbingData.evaluateNumber}}字好评+{{orderGrabbingData.evaluationMap}}图）</text>
						</view>
					</view>
					<view class="u-flex u-flex-items-center m-t-20">
						<text class="grabbing-ask-lable">备注</text>
						<view class="grabbing-ask-text">{{orderGrabbingData.remark}}</view>
					</view>
				</view>

				<view class="u-flex u-flex-between">
					<text class="order-card-title">报名须知</text>
				</view>
				<view class="application-text m-t-20">
					1.下单前<text class="prompt-color">请务必核对外卖平台</text>，辨别店铺名称且核对店铺地址，请尽量使用提供的跳转进店下单功能
				</view>
				<view class="application-text m-t-20">
					2.订单必须在报名后<text class="prompt-color">3小时内</text>上传订单信息，截图必须在提交订单后<text
						class="prompt-color">12小时内</text>提交。
				</view>
				<view class="application-text m-t-20 m-b-20">
					3.活动中有明确图文要求的在上传试吃反馈订单时需满足图文要求，且<text class="prompt-color">不要上传与本店无关图片及反馈内容</text>，才可获得返现优惠，并<text
						class="prompt-color">不可删除评价</text>不可删除评价，否则将收回返利。
				</view>
				<view class="application-text m-t-20 m-b-20">
					扣款金额 1.无图或无字- 扣5元 2.反馈折- 扣5元 3.实付不满- 扣不满部分(向上取整) 4.24点前未提交反馈 (21点后报名的除外) - 扣除2元
				</view>

				<u-button type="primary" shape="circle" color="#FF5151" text="领红包并确定报名"
					@tap="jumpExternalLinks"></u-button>

			</view>

		</u-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, unref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app';
	import orderHeader from '@/components/orderHeader.vue';
	import { orderGrabbing } from '@/common/order.api';

	let showOrderGrabbing = ref(false)

	let orderGrabbingData = ref({
		shopName: '',
		id: '',
		platform: 'mt',
		platform_dictText: '',
		surplusQuantity: 0,
		shopLogo: ''
	})

	onLoad(async (option) => {
		uni.getStorage({
			key: 'user_activity',
			success: function (res) {
				orderGrabbingData.value = JSON.parse(res.data)
			}
		});
	})

	function handlePlaceorder() {
		showOrderGrabbing.value = true
	}

	function toActivityrulesDescription() {
		uni.navigateTo({
			url: '/pages/ruleDescription/ruleDescription'
		});
	}

	function toIndex() {
		uni.navigateBack({
			delta: 1
		});
	}

	async function jumpExternalLinks() {
		// uni.$emit('update')
		let res = await orderGrabbing({ activityId: orderGrabbingData.value.id })
		uni.showToast({
			title: '抢单成功',
			icon: 'none'
		});
		
		uni.redirectTo({
			url: `/pages/orderPlace/orderPlace?id=${res}`
		});
		
		showOrderGrabbing.value = false

		if (orderGrabbingData.value.platform === 'elm') {
			uni.navigateToMiniProgram({
				appId: 'wxece3a9a4c82f58c9',
				path: 'ele-search/pages/search/search',
				// success(res) {
				// }
			})
			// return
		}
		// 测试 打开小程序
		if (orderGrabbingData.value.platform === 'mt') {
			uni.navigateToMiniProgram({
				appId: 'wx2c348cf579062e56',
				path: 'packages/index/search/search',
				// success(res) {
				// }
			})
			// return
		}

		// orderGrabbingData.value = await queryById({ activityId: unref(orderGrabbingData).id })
		// uni.navigateTo({
		// 	url: '/pages/orderPlace/orderPlace'
		// });
	}


	function classListTypeBg(type) {
		var genderMap = {
			'elm': 'list-bg-elm',
			'mt': 'list-bg-mt',
			'dy': 'list-bg-dy',
		};
		return genderMap[type]
	}
</script>

<style lang="scss" scoped>
	.ordergrabbing-container {
		background: #F6F6F6;
		padding-bottom: 150rpx;

		.grabbing-ask {
			font-weight: 400;
			color: #333333;

			.grabbing-ask-lable {
				font-size: 28rpx;
				padding-right: 30rpx;
			}

			.grabbing-ask-text {
				font-size: 26rpx;
			}

			.ask-sign {
				color: #FFFFFF;
				font-weight: 500;
				font-size: 26rpx;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
			}

			.ask-sign-1 {
				margin-right: 10rpx;
			}

			.list-bg-elm {
				background: #05B6FD;
			}

			.list-bg-mt {
				background: #FFBC42;
			}

			.list-bg-dy {
				background: #1F1F1F;
			}

			.ask-sign-2 {
				background: #FF5046;
			}
		}
	}

	.slot-icon {
		width: 20px;
		height: 20px;
		background-color: #FF5046;
		border-radius: 100px;
		font-size: 12px;
		color: #fff;
		line-height: 20px;
		text-align: center;
	}

	.assistant-title {
		font-size: 24rpx;
		font-weight: 400;
		color: #FE791B;
	}

	.fooet-btn-left {
		width: 28%;
	}

	.fooet-btn-right {
		width: 70%;
	}

	.ordergrabbing-popup-container {
		margin: 20rpx;

		.pop-header {
			margin: 60rpx 0 10rpx 0;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #F6F6F6;
		}

		.pop-header-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
			border: 1rpx solid #EBEBEB;
			margin-right: 20rpx;
		}

		.pop-header-title {
			font-weight: 500;
			color: #333333;

			.title {
				font-size: 38rpx;
			}

			.remain {
				padding-top: 10rpx;
				font-size: 26rpx;
			}
		}

		.popup-grabbing-ask {
			padding-bottom: 20rpx;
			border-bottom: 1px solid #F6F6F6;
		}

		.application-text {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}
	}

	// .pop-header{
	// 	border-radius: 20rpx 20rpx 0rpx 0rpx;
	// }
</style>